<template>
  <div id="home">
    <div class="container">
      <div class="lagout">
        <div class='headerBox'>
          <div class="inBox">
            <i class='el-icon-s-order icon'></i>
            <p>订单总数</p>
            <p class='p2'>200</p>
          </div>
        </div>
        <div class='headerBox'>
          <div class="inBox">
            <i class='el-icon-s-order icon'></i>
            <p>今日销售总额</p>
            <p class='p2'>$5000.00</p>
          </div>
        </div>
        <div class='headerBox'>
          <div class="inBox">
            <i class='el-icon-coin icon'></i>
            <p>昨日销售总额</p>
            <p class='p2'>$10000.00</p>
          </div>
        </div>
      </div>
      <div class="lagout2">
        <h2>待处理事务</h2>
        <div class='inlagout2'>
          <div class='listlagout2'>
            <div class='inlistlagout2'>
              <p>
                <span>待付款订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>已完成订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>待确认收货订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
          </div>
        </div>
        <div class='inlagout2'>
          <div class='listlagout2'>
            <div class='inlistlagout2'>
              <p>
                <span>待发货订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>新缺货登记</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>待处理退款申请</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
          </div>
        </div>
        <div class='inlagout2'>
          <div class='listlagout2'>
            <div class='inlistlagout2'>
              <p>
                <span>已收货订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>待处理退货订单</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
            <div class='inlistlagout2'>
              <p>
                <span>广告位即将到期</span>
                <span class='span2'>(10)</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="overview">
        <div class="inoverview">
          <div class='listoverview'>
            <div class='inlist'>
              <h2>商品总览</h2>
              <div class='inlistoverview'>
                <div class="listoverview1">
                  <p>100</p>
                  <p>400</p>
                  <p>50</p>
                  <p>500</p>
                </div>
                <div class="listoverview2">
                  <p>已下架</p>
                  <p>已上架</p>
                  <p>库存紧张</p>
                  <p>全部商品</p>
                </div>
              </div>
            </div>
          </div>
          <div class='listoverview'>
            <div class='inlist'>
              <h2>商品总览</h2>
              <div class='inlistoverview'>
                <div class="listoverview1">
                  <p>100</p>
                  <p>200</p>
                  <p>1000</p>
                  <p>5000</p>
                </div>
                <div class="listoverview2">
                  <p>今日新增</p>
                  <p>昨日新增</p>
                  <p>本月新增</p>
                  <p>会员总数</p>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <h1>订单统计</h1>
        <div class="footermap">
          <div  class='mapleft'>
            <div class='mapleftwarp'>
              <div class='boxleft'>
                <div class='box1'>本月订单</div>
                <div class='box2'>10000</div>
                <div class='box3'><span>+10%</span><span class='span2'>同比上月</span></div>
              </div>
              <div class='boxleft'>
                <div class='box1'>本月订单</div>
                <div class='box2'>10000</div>
                <div class='box3'><span>+10%</span><span class='span2'>同比上月</span></div>
              </div>
              <div class='boxleft'>
                <div class='box1'>本月订单</div>
                <div class='box2'>10000</div>
                <div class='box3'><span>+10%</span><span class='span2'>同比上月</span></div>
              </div>
            </div>
          </div>
          <div class="mapright">
            <highcharts :options="chartOptions"></highcharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      chartOptions: {
        chart: {
          type: 'area',
        },
        title:{
          text:"订单对比图"
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            month: '%b \'%y'
          }
        },
        yAxis: {
          labels: {
            formatter: function () {
              return this.value / 5;
            }
          },
          title:{
            text:"销售量"
          }
        },
        tooltip: {
          pointFormat: '{series.name} 销售 <b>{point.y}</b>'
        },
        plotOptions: {
          area: {
          pointStart: Date.UTC(2020),
          pointInterval: 30 * 24 * 3600 * 1000,
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2,
            states: {
              hover: {
                enabled: true
              }
            }
          }
          }
        },
    series: [{
        name: '上月订单',
        data: [33,43,55,23,123,235,54,12,34,65,12,22,]
      },
      {
        name: '本月订单',
        data: [20,50,70,130,46,83,53,52,124,33,21,50]
    }]
      }
    }
  }
}
</script>

<style scoped lang='less'>
#home{
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
  .container{
    padding:20px;
    .lagout{
      margin-left: -10px;
      margin-right: -10px;
      display: flex;
      .headerBox{
        padding-left: 10px;
        padding-right: 10px;
        flex:1;
        .inBox{
          border: 1px solid #DCDFE6;
          padding: 20px;
          height: 100px;
          .icon{
            color: #409EFF;
            font-size: 60px;
          }
          p{
            position: relative;
            font-size: 16px;
            color: #909399;
            left: 70px;
            top: -60px;
          }
          .p2{
            position: relative;
            font-size: 18px;
            color: #606266;
            left: 70px;
            top: -50px;
          }
        }
      }
    }
    .lagout2{
      margin-top: 20px;
      border: 1px solid #DCDFE6;
      h2{
        color: #606266;
        padding: 15px 20px;
        background: #F2F6FC;
        font-weight: bold;
      }
      .inlagout2{
        padding: 5px 40px;
        .listlagout2{
          margin-left: -10px;
          margin-right: -10px;  
          display:flex;  
          .inlistlagout2{
            padding-left: 10px;
            padding-right: 10px;
            flex:1;
            p{
              border-bottom: 1px solid #EBEEF5;
              padding: 10px;
              span{
                font-size: 16px;
                color: #606266;
              }
              .span2{
                color: #F56C6C;
                float:right;
              }
            }
          }
        }
      }
    }
    .overview{
      margin-top: 20px;
      .inoverview{
        margin-left: -10px;
        margin-right: -10px;
        display:flex;
        .listoverview{
          padding-left: 10px;
          padding-right: 10px;
          flex:1;
          .inlist{
            border: 1px solid #DCDFE6;
            h2{
              color: #606266;
              padding: 15px 20px;
              background: #F2F6FC;
              font-weight: bold;
            }
            .inlistoverview{
              padding: 40px;
              .listoverview1{
                box-sizing: border-box;
                display: flex;
                p{
                  flex:1;
                  font-size: 24px;
                  text-align: center;
                  color: #F56C6C;
                }
              }
              .listoverview2{
                box-sizing: border-box;
                display: flex;
                p{
                  flex:1;
                  margin-top: 10px;
                  text-align: center;
                  width:25%;
                }
              }
            }
          }
        }
      }
    }
    .footer{
      margin-top: 20px;
      border: 1px solid #DCDFE6;
      h1{
        color: #606266;
        padding: 15px 20px;
        background: #F2F6FC;
        font-weight: bold;
        font-size:20px;
      }
      .footermap{
        box-sizing: border-box;
        display:flex;
        .mapleft{
          flex:1;
          border-right: 1px solid #DCDFE6;
          .mapleftwarp{
            padding: 20px;
            .boxleft{
              box-sizing: inherit;
              padding-top:10px;
              .box1{
                color: rgb(144, 147, 153);
                font-size: 16px;
              }
              .box2{
                color: rgb(96, 98, 102);
                font-size: 24px;
                padding: 10px 0px;
              }
              .box3{
                box-sizing: inherit;
                span{
                  font-size: 14px;
                  color: #67C23A;
                }
                .span2{
                  color: rgb(192, 196, 204);
                  font-size: 14px;
                  float:right;
                }
              }
            }
          }
        }
        .mapright{
          flex:4;
        }
      }
    }
  }
}
</style>